<template>
  <CommonPage :title="title">
    <template #mid>
      <SearchForm>
        <template #extraButtons>
          <a-button type="primary" @click="showCreate">新增{{ name }}</a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }: BodyCellOptions<Partial<DictItem>>">
        <div v-if="column.key === 'oper'">
          <a v-if="isTree" @click="showSubCreate(record)">添加下级</a>
          <a class="ml-2" @click="showUpdateModal(record)">编辑</a>
          <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
        </div>
      </template>
    </SlTable>
    <CURDDialog
      ref="CURDModalIns"
      id-key="id"
      :columns="columns"
      :create-title="'新增' + name"
      :update-title="'编辑' + name"
      :delete-message="`确认删除该${name}吗？`"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :table-data="tableData"
      :curd="curd"
      :reload-table="reloadTable"
      @before-ok="beforeOk"
    />
  </CommonPage>
</template>
<script lang="ts" setup>
import { onMounted, ref, shallowRef } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { FormItemComponentType, CURDAction, CURDDialogExpose } from "/@/components/CURDDialog/models";
import type { FormItemData, OperItem, ShowCURDModalOptions, CURDModalEvent } from "/@/components/CURDDialog/models";
import type { TableProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { Api } from "/@/api/main/system";
import { type DictItem, DictTypeCode, type ParamItem } from "/@/api/main/system/models";
import dayjs from "dayjs";
import type { BodyCellOptions } from "/@/types/antd";
import { loopItem } from "/@/utils/treeData";

const { t } = useI18n();
const props = defineProps<{
  title: string;
  typeCode: DictTypeCode;
  name: string;
  isTree: boolean;
}>();
const columns = ref<TableProps<Partial<DictItem>>["columns"]>([
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "编码",
    dataIndex: "value",
  },
  {
    title: "图标",
    dataIndex: "icon",
  },
  {
    title: t("common.oper"),
    key: "oper",
    width: 100,
  },
]);
const model = ref<Partial<DictItem>>({
  name: "",
  value: "",
  icon: "",
});
const modelFormSetting: FormItemData<Partial<DictItem>>[] = [
  {
    key: "name",
    max: 32,
    pattern: PatternKey.name,
    required: true,
  },
  {
    key: "value",
    max: 32,
    pattern: PatternKey.name,
    required: true,
  },
  {
    key: "icon",
  },
];

const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<DictItem>({
  getPageUrl: Api.dictPage,
  cudUrl: Api.dict,
  loadOnMounted: false,
  loadFilter(data) {
    loopItem(data, (item) => {
      if (!item.children || item.children.length === 0) {
        item.children = undefined;
      }
    });
    return data;
  },
});

onMounted(() => {
  reloadTable({
    model: {
      typeCode: props.typeCode,
    },
  });
});

let curParentId: number | null = null;
const showOptions = ref<ShowCURDModalOptions>();
function showSubCreate(record: Partial<DictItem>) {
  curParentId = record.id as number;
  showOptions.value = { action: CURDAction.CREATE };
}

function showCreate() {
  curParentId = null;
  showOptions.value = { action: CURDAction.CREATE };
}

function showUpdateModal(record: Partial<DictItem>) {
  curParentId = record.parentId as number;
  showOptions.value = { action: CURDAction.UPDATE, record };
}

function handleDelete(record: Partial<DictItem>) {
  showOptions.value = { action: CURDAction.DELETE, ids: [record.id as number] };
}

function beforeOk({ action, model }: CURDModalEvent<Partial<DictItem>>) {
  if (model) {
    model.typeCode = props.typeCode;
    model.parentId = curParentId || 0;
  }
}
</script>
